<template>


        <div class="super_container">

                <myheader :total_price='total' :count='count'></myheader>
            
                <!-- Home -->
            
								
								<!-- Home -->

	<div class="home">
		<div class="parallax_background parallax-window" data-parallax="scroll" ></div>
		<div class="home_container">
			<div class="home_content">
				<div class="home_title">Shop</div>
				<div class="breadcrumbs">
					<ul class="d-flex flex-row align-items-center justify-content-start">
						<li><a href="/">Home</a></li>
						<li><a href="categories.html">Woman</a></li>
						<li><a href="categories.html">Accessories</a></li>
						<li>Shoulder Bag</li>
					</ul>
				</div>
			</div>
		</div>
	</div>

	<!-- Products -->

	<div class="product">

		<!-- Sorting & Filtering -->
		<div class="products_bar">
			<div class="section_container">
				<div class="container">
					<div class="row">
						<div class="col">
							<div class="products_bar_content d-flex flex-row align-items-center justify-content-start">
								<div class="product_categories">
									<ul class="d-flex flex-row align-items-start justify-content-start flex-wrap">
										<li class="active"><a href="#">All</a></li>
										<li><a href="#">Hot Products</a></li>
										<li><a href="#">New Products</a></li>
										<li><a href="#">Sale Products</a></li>
									</ul>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<!-- Product Content -->
		<div class="section_container">
			<div class="container">
				<div class="row">
					<div class="col">
						<div class="product_content_container d-flex flex-lg-row flex-column align-items-start justify-content-start">
							<div class="product_content order-lg-1 order-2">
								<div class="product_content_inner">
									<div class="product_image_row d-flex flex-md-row flex-column align-items-md-end align-items-start justify-content-start">
										<div class="product_image_1 product_image" v-for="i in good_img">
											<img :src="base_url+'/static/upload/'+i.img_name" alt="">
										</div>
									</div>
								

									商品简介商品简介商品简介商品简介商品简介商品简介商品简介商品简介商品简介商品简介商品简介

										<editor id='tinymce' v-model='tinymceHtml' :init='init'></editor>
											<button class="cart_button trans_200" @click="comment(good)">发表评论</button>

											<div v-for="(i,index) in comments">
												
											
													{{index+1}}
													<a v-html="i.content">{{i.content}}</a>
													{{cre_time}}<a v-html="i.create_time">{{i.create_time}}</a>
												<br>
											</div>






								</div>
							</div>
							<div class="product_sidebar order-lg-2 order-1">
								<form action="#" id="product_form" class="product_form">
									<div class="product_name">{{good.good_name}}</div>
									<div class="product_price">${{good.good_price}}</div>
									<div class="product_color">Color: <span>Brown</span></div>
									<div class="product_size">
										<div class="product_size_title">Select Size</div>
										<div class="product_size_list">
											<ul>
												<li class="size_available">
													<input type="radio" id="radio_1" name="product_radio" class="regular_radio radio_1">
													<label for="radio_1">{{st.g_st1}}</label>
												</li>
												<li class="size_available">
													<input type="radio" id="radio_2" name="product_radio" class="regular_radio radio_2">
													<label for="radio_2">{{st.g_st2}}</label>
												</li>
												<li class="size_available">
													<input type="radio" id="radio_3" name="product_radio" class="regular_radio radio_3">
													<label for="radio_3">{{st.g_st3}}</label>
												</li>
												
											</ul>
										</div>
									</div>
									
								</form>
								<button class="cart_button trans_200" @click="add_cart(good)">加入购物车</button>
								<div class="similar_products_button trans_200"><a href="categories.html">同类商品</a></div>
								<div class="product_links">
									<ul class="text-center">
										<li><button v-on:click='getkefu'>客服聊天</button></li>
										<li><a href="#">See guide</a></li>
										<li><a href="#">Shipping</a></li>
										<li><a href="#">Returns</a></li>
									</ul>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
            
                
            
                <!-- Footer -->
            
                <myfooter></myfooter>


            
            
            </div>

      
</template>
      
      
       
      <script>


        import myheader from './header.vue'
		import myfooter from './footer.vue'
		import Cookies from 'js-cookie'
		import tinymce from 'tinymce/tinymce'
		import Editor from '@tinymce/tinymce-vue'
		import 'tinymce/themes/silver/theme.min.js'
		import 'tinymce/plugins/image'
		import 'tinymce/plugins/link'
		import 'tinymce/plugins/imagetools'
		import 'tinymce/plugins/media'
		import 'tinymce/plugins/table'
		import 'tinymce/plugins/lists'
		import 'tinymce/plugins/contextmenu'
		import 'tinymce/plugins/wordcount'
		import 'tinymce/plugins/colorpicker'
		import 'tinymce/plugins/textcolor'
     
      
      export default {
		  name:'tinymce',
        data () {
          return {

			  cre_time:'发表时间：',
			  comments:[],
			  count:0,
			  total:0,		  
			  good_img:'',
			  st:'',
			good:'',
			comment_list:[],
            msg: "",
            datalist:[],
            clicked:0,
            upath: '',
          result: '',
		  uping:0,
		 tinymceHtml: '',
      init: {
        language_url: '/static/tinymce/zh_CN.js',
        language: 'zh_CN',
        skin_url: '/static/tinymce/skins/ui/oxide',
        height: 300,
        plugins: 'link lists image code table colorpicker textcolor wordcount contextmenu',
        toolbar:
          'bold italic underline strikethrough | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent blockquote | undo redo | link unlink image code | removeformat',
        branding: false
      }
          }
        },
        components: {
			'Editor':Editor,
        'myheader':myheader,
        'myfooter':myfooter
        },
        mounted:function(){

			this.common.get_menu();

			this.data();
			var data = Cookies.get('cart');
			if(data){
				data = JSON.parse(data)
				this.datalist = data;
			};
			this.total_price()
			this.get_comment()
			tinymce.init({})
			
         },
        methods:{
            changetest(index){
                this.clicked = index;
			},
			
			data:function() {
             //设置请求路径
			 var url  = this.base_url+"/Good_show/"+this.$route.query.id  
			               
             // 发送请求:将数据返回到一个回到函数中
             var _this= this;
             // 并且响应成功以后会执行then方法中的回调函数
                this.axios.get(url)
                .then(function(result) {

                    // console.log(result);
                    _this.good=result.data.good[0];
                    _this.st=result.data.st;
                    _this.good_img=result.data.good_img;
					
                        });    
						},
						

  
	 	add_cart:function(good){
            let cartlist = this.datalist;
            let findgood = 0;
            for(let i=0,l=cartlist.length;i<l;i++){
                    if(good.good_name == cartlist[i]['name']){
                        cartlist[i]['num']++;
                        findgood = 1;
                        break;
                    }
            }
            if(findgood==0){
                cartlist.push({'id':good.id,'name':good.good_name,'price':good.good_price,'img':good.img,'num':1});
            }
			this.datalist = cartlist;
            Cookies.set('cart',this.datalist,{ expires: 7 })
			this.post_redis();
			this.total_price();
            alert('添加购物车成功')

		},
		post_redis:function(){
				var add_cart_redis = this.base_url+"/Addcart_redis"
				var _this = this
				var params = {
					'cartlist':JSON.stringify(this.datalist)
				}
				this.axios.post(add_cart_redis,this.qs.stringify(params)).then(function(result) {
				if(result.data['code'] == '200') {
					// console.log(result.data.message)
				}
				else {
					_this.msg = result.data.message
					// console.log(result.data)
				}

				}); 
			},
			total_price:function(){
				let cartlist = this.datalist;
				this.total = 0
				this.count = 0
            	for(let i=0,l=cartlist.length;i<l;i++){
				this.total = this.total + (cartlist[i].price * cartlist[i].num);
				this.count = this.count + cartlist[i].num
				}
			},


			comment:function(good){
				
				var user_id = Cookies.get('u_id')
				var user_name = Cookies.get('name')
				if(user_name){
					var token = localStorage.getItem('token')
					let good_id = this.$route.query.id
					var data = {
					'comment':this.tinymceHtml,
					'u_id':user_id,
					'name':user_name,
					'token':token,
					'good_id':good.id
				}
				console.log(data)
				var _this = this
				var url  = this.base_url+"/comment";
				this.axios.post(url,this.qs.stringify(data))
				.then(function(result) {
					
				if(result.data['code'] == '200') {
					_this.comments = result.data.comments
				
					console.log(result.data)
					

				}
				else {
					// _this.msg = result.data.message
					alert(result.data.message)
				}
				});
				}
				else{
					alert('请您登陆')
					this.$router.push({path:'/login'})
				}
				
			},
			get_comment:function(){
				var user_name = Cookies.get('name')
				var token = localStorage.getItem('token')
				let good_id = this.$route.query.id
				var data = {
					'name':user_name,
					'token':token,
					'good_id':good_id
				}
			
				var _this = this
				var url  = this.base_url+"/get_comment";
				this.axios.post(url,this.qs.stringify(data)).then(function(result) {
				if(result.data['code'] == '200') {
					
					_this.comments = result.data.comments
					console.log(result.data)

				}
				else {
					// _this.msg = result.data.message
					alert(result.data.message)
				}
				});
			},


			 getkefu:function() {
				 this.$router.push({path:'/kefu'})
                    },
	



        }
      }
      
      
      </script>
       
      <style>


			@import '../assets/styles/cart.css';
			@import '../assets/styles/cart_responsive.css';

			@import '../assets/styles/checkout.css';
			@import '../assets/styles/checkout_responsive.css';


			@import '../assets/styles/product.css';
			@import '../assets/styles/product_responsive.css';
      
      
      </style>